﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../../Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="../../Scripts/vue.js"></script>
    <link href="../../../DataUser/Style/ccbpm.css" rel="stylesheet" type="text/css" />

    <script language="JavaScript" src="../../Comm/JScript.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../Scripts/QueryString.js"></script>
    <script type="text/javascript" src="../../Scripts/config.js"></script>
    <script type="text/javascript" src="../../Comm/Gener.js"></script>
    <script src="../../Scripts/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <link href="../../Scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../../Scripts/bootstrap/css/font-awesome.css" rel="stylesheet" type="text/css" />
    <link href="../../Scripts/element/element.css" rel="stylesheet" />

    <script src="../../Scripts/bootstrap/bootstrap-table/src/bootstrap-table.js" type="text/javascript"></script>
    <link href="../../Scripts/bootstrap/bootstrap-table/src/bootstrap-table.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/bootstrap/bootstrap-table/src/locale/bootstrap-table-zh-CN.js" type="text/javascript"></script>

    <script src="../../Scripts/bootstrap/bootstrap-treeview/src/js/bootstrap-treeview.js" type="text/javascript"></script>
    <link href="../../Scripts/bootstrap/bootstrap-treeview/src/css/bootstrap-treeview.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/element/element.js"></script>
    <style type="text/css">
        .row-margin-top {
            margin-top: 20px;
        }

        .search-margin {
            margin-top: 15px;
        }

        .container-fluid {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #back_btn {
            margin-top: 15px;
            margin-right: auto;
        }

        .el-button--primary {
            padding: 0 15px;
            margin-left: 20px;
            margin-bottom: 15px;
            height: 25px;
            line-height: 25px;
        }

        label {
            margin-bottom: 0;
        }

        .el-tree {
            padding-left: 20px;
        }

        .is-leaf::before {
            display: none;
        }

        .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
            font-weight: bold;
        }
        .row{
            margin-left:0;
        }
        .el-tag {
            margin: 5px 5px;
        }
        .el-card__header {
            padding: 10px 20px;
        }
        .el-card__body {
            padding: 10px 20px;
        }
    </style>
</head>
<body>
    <div class="row row-margin-top" style="width: 100%" id="app">
        <el-card style="margin: 0 8px 8px" shadow="hover">
            <div slot="header">
                <span>已选中的部门</span>
            </div>
            <el-tag v-for="tag in tags"
                    :key="tag.id"
                    closable
                    :type="tag.type"
                    @close="handleClose(tag)">
                {{tag.name}}
            </el-tag>
        </el-card>

        <el-tree :props="defaultProps"
                 :load="loadNode"
                 :data="jsonTree"
                 lazy
                 node-key="id"
                 show-checkbox
                 ref="tree"
                 highlight-current
                 :check-strictly="true"
                 @check-change="handleCheckChange">
        </el-tree>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    checkAll: false,
                    mapExt: null,
                    defaultProps: {
                        children: 'children',
                        label: 'name',
                        isLeaf: (data, node) => {
                            if (node.level === 4) {
                                return true
                            }
                        }
                    },
                    jsonTree: [],
                    rootNo: null,
                    child: [],
                    isBackBtn: '',
                    tags: [],
                };
            },
            methods: {
                handleClose(tag) {
                    //console.log(tag);
                    var en = new Entity(GetQueryString("Dot2DotEnName"));
                    en[GetQueryString("AttrOfOneInMM")] = GetPKVal();
                    en[GetQueryString("AttrOfMInMM")] = tag.id;
                    en.Delete(GetQueryString("AttrOfOneInMM"), GetPKVal(), GetQueryString("AttrOfMInMM"), tag.id);
                    //取消选中时如果tags数组中有已经选中的数据，再进行点击取消删除时进项删除该项
                    var tmp = $.grep(this.tags, function (value) {
                        return value.id != tag.id;
                    });
                    this.tags = tmp;

                    let chooseRes = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
                    //console.log(chooseRes);
                    for (var i = 0; i < chooseRes.length; i++) {
                        if (chooseRes[i] == tag.id) {
                            this.$refs.tree.setChecked(tag.id, false)
                        }
                    }
                },
                handleCheckChange(data, checked, z) {
                    //console.log(data);
                    //console.log(z);
                    let arr = []
                    let res = this.$refs.tree.getCheckedNodes()
                    res.forEach((item) => {
                        arr.push(item.id)
                    })
                    var en = new Entity(GetQueryString("Dot2DotEnName"));
                    en[GetQueryString("AttrOfOneInMM")] = GetPKVal();
                    en[GetQueryString("AttrOfMInMM")] = data.id;
                    en.DeptName = data.name;
                    if (checked == true) {
                        //判断数据是否存在，如果存在选中时就不再添加，不存在再添加
                        var flag = false;
                        for (var i in this.tags) {
                            if (this.tags[i].id == data.id) {
                                flag = true;
                            }
                        }
                        if (flag == false) {
                            this.tags.push({
                                id: data.id,
                                name: data.name,
                            })
                        }

                        //选中
                        en.Save();
                    } else {
                        //取消选中时如果tags数组中有已经选中的数据，再进行点击取消删除时进项删除该项
                        var tmp = $.grep(this.tags, function (value) {
                            return value.id != data.id;
                        });
                        this.tags = tmp;
                        //取消选中
                        en.Delete(GetQueryString("AttrOfOneInMM"), GetPKVal(), GetQueryString("AttrOfMInMM"), data.id);
                    }
                },
                //判断是否有上一路径;
                IsBack() {
                    this.isBackBtn = GetQueryString("BackBtn"),
                        console.log(this.isBackBtn);
                    if (document.referrer.includes("EmpDepts.htm")) {
                        window.history.go(-1);
                    } else {
                        window.history.go(0);
                    }
                },
                //懒加载
                loadNode(node, resolve) {
                    if (node.level === 0) {
                        var roootData = [];
                        roootData = this.jsonTree.map(key => {
                            return {
                                name: key.label,
                                id: key.id,
                                children: key.children,
                            }
                        })
                        return resolve(roootData);
                    }
                    if (node.level > 3) {
                        return resolve([]);
                    }
                    if (node.level > 0) {
                        var ens = new Entities(GetQueryString("EnsOfM")); //BP.Port.Depts
                        ens.Retrieve("ParentNo", node.data.id, "Idx");
                        this.child = this.creatTreeChildern(ens, node.data.id);
                        var data = [];
                        data = this.child.map(item => {
                            return {
                                name: item.label,
                                id: item.id,
                                children: item.children,
                            }
                        })
                        setTimeout(() => {
                            resolve(data);
                        }, 500);
                    }

                },
                createJsonToTree(jsonArray, parentNo) {
                    //获取ParentNo的数据
                    var items = $.grep(jsonArray, function (obj) {
                        return obj.No == parentNo;
                    });
                    if (items.length != 0) {
                        this.jsonTree.push({
                            "id": items[0].No,
                            "label": items[0].Name,
                            "children": this.creatTreeChildern(jsonArray, items[0].No),
                            "state": { checked: checked, disabled: false }
                        });
                    } else {
                        for (var i = 0; i < jsonArray.length; i++) {
                            var data = jsonArray[i];
                            if (data.ParentNo.trim() == parentNo) {
                                var checked = false;
                                this.jsonTree.push({
                                    "id": data.No,
                                    "label": data.Name,
                                    "children": this.creatTreeChildern(jsonArray, data.No),
                                    "state": { checked: checked, disabled: false }
                                });
                            }
                        }
                        this._(this.jsonTree);
                    }
                }
                , _(treeArray) {
                    $.each(treeArray, function (i, o) {
                        if ($.isArray(o.children)) {
                            if (o.children.length == 0) {
                                o.children = [];
                            } else {
                                this._(o.children);
                            }
                        }
                    });
                },
                creatTreeChildern(jsonArray, parentNo) {
                    var childList = []
                    for (var i = 0; i < jsonArray.length; i++) {
                        var data = jsonArray[i];
                        if (data.ParentNo == parentNo) {
                            var checked = false;
                            this.jsonTree.filter((ID) => {
                                if (ID.id === parentNo) ID.children.push({
                                    "id": data.No,
                                    "label": data.Name,
                                    "children": this.creatTreeChildern(jsonArray, data.No),
                                    "state": { checked: checked, disabled: false }
                                })
                            })
                            childList.push({
                                "id": data.No,
                                "label": data.Name,
                                "children": this.creatTreeChildern(jsonArray, data.No),
                                "state": { checked: checked, disabled: false }
                            });
                        }
                    }

                    return childList;
                },
                //获取父节点数据
                loadTree() {
                    var webUser = new WebUser()
                    //global
                    let global = window;
                    global.selectedNodes = [];
                    global.selectedRows = [];
                    this.rootNo = GetQueryString("RootNo");
                    if (this.rootNo == "@WebUser.FK_Dept")
                        this.rootNo = webUser.FK_Dept;
                    if (webUser.CCBPMRunModel == 2)
                        this.rootNo = webUser.OrgNo;
                    if (this.rootNo == null || this.rootNo == "")
                        this.rootNo = webUser.FK_Dept;
                    let ens = new Entities(GetQueryString("EnsOfM")); //BP.Port.Depts
                    ens.Retrieve("ParentNo", this.rootNo, "Idx");
                    this.createJsonToTree(ens, this.rootNo);
                    if (ens.length == 0) {
                        let ParentNo = 'OrgNo';
                        ens.Retrieve(ParentNo, this.rootNo, "Idx");
                        this.createJsonToTree(ens, this.rootNo);
                    }
                    //查询选中的部门
                    ens = new Entities(GetQueryString("Dot2DotEnName") + "s");
                    ens.Retrieve(GetQueryString("AttrOfOneInMM"), GetPKVal());

                    for (var i = 0; i < ens.length; i++) {
                        var en = ens[i];
                        if(en.FK_Emp === 'admin' && en.DeptName === '') continue;
                        this.tags.push({
                            id: en.FK_Dept,
                            name: en.DeptName,
                        })

                    }
                    //console.log(this.tags);
                },
            },
            created() {
                this.loadTree();
            },
        })
    </script>
</body>
</html>
